import { computed, defineComponent, ref } from 'vue';
import Buffering from './Buffering.vue';
import CustomHeight from './CustomHeight.vue';
import Determinate from './Determinate.vue';
import Indeterminate from './Indeterminate.vue';
import Label from './Label.vue';
import OnDarkBackground from './OnDarkBackground.vue';
import Query from './Query.vue';
import Reverse from './Reverse.vue';
import StandardSizes from './StandardSizes.vue';
import Stripe from './Stripe.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Buffering</h5>
            <Buffering />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomHeight</h5>
            <CustomHeight />
          </div>
          <div class='block-'>
            <h5 class='title'>Determinate</h5>
            <Determinate />
          </div>
          <div class='block-'>
            <h5 class='title'>Indeterminate</h5>
            <Indeterminate />
          </div>
          <div class='block-'>
            <h5 class='title'>Label</h5>
            <Label />
          </div>
          <div class='block-'>
            <h5 class='title'>OnDarkBackground</h5>
            <OnDarkBackground />
          </div>
          <div class='block-'>
            <h5 class='title'>Query</h5>
            <Query />
          </div>
          <div class='block-'>
            <h5 class='title'>Reverse</h5>
            <Reverse />
          </div>
          <div class='block-'>
            <h5 class='title'>StandardSizes</h5>
            <StandardSizes />
          </div>
          <div class='block-'>
            <h5 class='title'>Stripe</h5>
            <Stripe />
          </div>
        </div>
      );
    };
  },
});
